<template>
  <div>
    <search-hander @handleSearch="handleSearch" />
    <div class="main">
      <div class="btnBox">
        <el-button class="btn" @click="addDevice">
          <i class="el-icon-circle-plus-outline" />
          新建
        </el-button>
        <el-button class="configBtn" @click="setDevicePrice">
          批量操作
        </el-button>
      </div>
      <el-table :data="vmList" @selection-change="selectDevice">
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="90">
          <template v-slot="{ $index }">
            {{ $index + 1 + (params.pageIndex - 1) * 10 }}
          </template>
        </el-table-column>
        <el-table-column label="设备编号" prop="innerCode" />
        <el-table-column label="设备型号" prop="type.name" />
        <el-table-column label="详细地址" prop="node.name" />
        <el-table-column label="合作商" prop="ownerName" />
        <el-table-column label="设备状态">
          <template v-slot="{ row }">
            {{ vmStatusArr[row.vmStatus] }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              type="text"
              @click="showStuffDialog = true"
            >货道
            </el-button>
            <!--            货道组件-->
            <showHuodaoDialog :show-stuff-dialog.sync="showStuffDialog" />
            <el-button type="text" @click="showStrategy(row)">策略</el-button>
            <el-button type="text" @click="editDevice(row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row
        v-if="totalPage > 1"
        align="middle"
        justify="space-between"
        style="height: 60px"
        type="flex"
      >
        <span
          style="color: #dbdfe5"
        >共{{ totalCount }}条记录 第 {{ params.pageIndex }}/{{
          totalPage
        }}
          页</span>
        <el-pagination
          :current-page="params.pageIndex"
          :page-size="params.pageSize"
          :total="+totalCount"
          layout="prev, next"
          next-text="下一页"
          prev-text="上一页"
          @current-change="changePage"
        />
      </el-row>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="批量策略管理" width="30%">
      <el-form label-position="top">
        <el-form-item label="选择策略">
          <el-select v-model="policyId" placeholder="请选择">
            <el-option
              v-for="(item, index) in policyList"
              :key="index"
              :label="item.policyName"
              :value="item.policyId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="showAddDialog" title="新增设备" width="30%">
      <el-form label-position="left" label-width="100px">
        <el-form-item label="设备编号：">
          <span>系统自动生成</span>
        </el-form-item>
        <el-form-item label="选择型号：">
          <el-select v-model="vmType" placeholder="请选择">
            <el-option
              v-for="(item, index) in vmTypeList"
              :key="index"
              :label="item.name"
              :value="item.typeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择点位：">
          <el-select v-model="nodeId" placeholder="请选择">
            <el-option
              v-for="(item, index) in nodeList"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="submitAdd">确认</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="showStrategyDialog" title="策略管理" width="30%">
      <span>机器编号：{{ vmPolicy.innerCode }}</span>
      <span>策略名称：{{ vmPolicy.policyName }}</span>
      <p>策略方案：{{ vmPolicy.discount }}%</p>
      <el-button @click="cancelStrategy"> 取消策略</el-button>
    </el-dialog>
    <el-dialog :visible.sync="editDeviceDialog" title="修改设备" width="30%">
      <p>机器编号：{{ vmPolicy.innerCode }}</p>
      <p>供货时间：{{ vmPolicy.updateTime }}</p>
      <p>设备类型：{{ type.name }}</p>
      <p>设备容量：{{ type.vmCol }}</p>
      <div>
        <span>设备点位：</span>
        <el-select v-model="nodeId" placeholder="请选择">
          <el-option
            v-for="(item, index) in nodeList"
            :key="index"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
      <p>合作商：{{ vmPolicy.ownerName }}</p>
      <p>所属区域：{{ region.name }}</p>
      <p>设备地址：{{ node.name }}</p>
      <el-button @click="editDeviceDialog = false">取消</el-button>
      <el-button @click="putDeviceNode">确认</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {
  addDevice,
  cancelPolicy,
  getNodeList,
  getPolicyList,
  getVmList,
  getVmPolicy,
  getVmTypeList,
  putDeviceNode,
  useApplyPolicy
} from '@/api/vmindex'
import SearchHander from '@/components/SearchHander/index.vue'
import { vmStatusArr } from '@/api/constants'
import showHuodaoDialog from '@/components/Dialog/stuffdialog'

export default {
  components: {
    SearchHander,
    showHuodaoDialog
  },
  data() {
    return {
      showStuffDialog: false,
      showStrategyDialog: false,
      policyId: null,
      dialogVisible: false,
      total: 0,
      totalPage: 0,
      totalCount: 0,
      vmStatusArr: vmStatusArr,
      vmList: [],
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      deviceList: [],
      policyList: [],
      nodeList: [],
      vmTypeList: [],
      showAddDialog: false,
      vmType: null,
      nodeId: null,
      vmPolicy: {},
      editDeviceDialog: false,
      innerCodeList: [],
      type: {},
      region: {},
      node: {}
    }
  },
  created() {
    this.getVmList()
  },
  methods: {
    showDialog() {
      this.showStuffDialog = true
    },
    onConfirm() {
      // 确认按钮被点击时的处理逻辑
      console.log('确认按钮被点击')
    },
    async putDeviceNode() {
      // 修改点位 接口写错了。。。
      // await putDeviceNode({
      //   id: this.vmPolicy.id,
      //   name: this.vmPolicy.type.name,
      //   addr: this.vmPolicy.node.addr,
      //   areaCode: this.vmPolicy.node.areaCode,
      //   regionId: this.vmPolicy.regionId,
      //   businessId: this.vmPolicy.node.businessId,
      //   ownerId: this.vmPolicy.ownerId,
      //   ownerName: this.vmPolicy.ownerName
      // })
      await putDeviceNode({
        id: this.vmPolicy.id,
        nodeId: this.nodeId
      })
      this.$message.success('修改成功')
      this.getVmList()
      this.editDeviceDialog = false
    },
    async editDevice(row) {
      this.vmPolicy = row
      this.type = row.type
      this.region = row.region
      this.node = row.node
      console.log(row)
      const res = await getNodeList()
      this.nodeList = res.currentPageRecords
      this.editDeviceDialog = true
    },
    async cancelStrategy() {
      console.log(this.vmPolicy)
      await cancelPolicy(this.vmPolicy)
      this.$message.success('取消成功')
      this.showStrategyDialog = false
      this.getVmList()
    },
    async showStrategy(row) {
      this.deviceList.push(row)
      const res = await getVmPolicy(row.innerCode)
      this.$nextTick(() => {
        this.vmPolicy = res
        if (this.vmPolicy) {
          this.showStrategyDialog = true
        } else {
          console.log(this.innerCodeList)
          this.shishandaima()
        }
      })
    },
    async submitAdd() {
      if (!this.vmType) return this.$message.warning('请选择设备型号')
      if (!this.nodeId) return this.$message.warning('请选择点位')
      await addDevice({
        vmType: this.vmType,
        nodeId: this.nodeId,
        createUserId: 1
      })
      this.$message.success('新增成功')
      this.showAddDialog = false
      this.getVmList()
    },
    async addDevice() {
      const res1 = await getVmTypeList()
      const res = await getNodeList()
      this.vmTypeList = res1.currentPageRecords
      this.nodeList = res.currentPageRecords
      this.showAddDialog = true
    },
    async submit() {
      if (!this.policyId) return this.$message.warning('请选择策略')
      this.innerCodeList = this.deviceList.map((item) => item.innerCode)
      await useApplyPolicy({
        policyId: this.policyId,
        innerCodeList: this.innerCodeList
      })
      this.dialogVisible = false
      this.$message.success('操作成功')
      this.getVmList()
    },
    async setDevicePrice() {
      if (this.deviceList.length === 0) {
        return this.$message.warning('请勾选售货机')
      }
      const res = await getPolicyList()
      this.policyList = res
      this.dialogVisible = true
    },
    async shishandaima() {
      const res = await getPolicyList()
      this.policyList = res
      this.dialogVisible = true
    },
    selectDevice(row) {
      this.deviceList = row
    },
    handleSearch(searchText) {
      this.params.pageIndex = 1
      this.params.innerCode = searchText
      this.getVmList()
    },
    async changePage(page) {
      this.params.pageIndex = page
      await this.getVmList()
    },
    async getVmList() {
      const res = await getVmList(this.params)
      this.vmList = res.currentPageRecords
      this.totalPage = res.totalPage
      this.totalCount = res.totalCount
    }
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 693px;
  padding: 20px;
  background-color: #fff;
  margin-bottom: 70px;
}

.btnBox {
  display: flex;
  padding-bottom: 20px;
}

.btn {
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 80px;
  height: 36px;
  padding: 0;
  background: linear-gradient(135deg, #ff9743, #ff5e20);
  border: none;
  color: white;
}

.configBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 36px;
  text-align: center;
  padding: 0;
  background-color: #f3e7e1;
}

::v-deep .el-table td,
.el-table th {
  padding: 3px 0;
}

::v-deep .el-table td,
.el-table th.is-leaf {
  border-bottom: 0;
}

::v-deep .el-pagination button {
  width: 70px;
  height: 32px;
  margin: 0 16px;
  border-radius: 2px;
  background-color: #d5ddf8;
}

::v-deep .btn-prev:disabled {
  background: #edf0f9;
}
</style>
